<template>
	<div id="candy"></div>
</template>

<script>
	export default {
		data() {
			return {
				candy: '',
				category: []
			}
		},
		mounted() {
			this.getData();
			this.draw();
		},
		methods: {
			getData(){
				this.$http.get(this.$api.)
			},
			getDate() {
				let category = [];
				for (let i = 0; i < 8; i++) {
					let date = new Date(new Date().getTime() - (1000 * 3600 * 24 * (i + 1)));
					category.push([
						date.getFullYear(),
						(date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1,
						(date.getDate() + 1) < 10 ? '0' + (date.getDate() + 1) : date.getDate() + 1,
					].join('-'));
				}
				return category
			},
			draw() {
				this.candy = this.$echarts.init(document.getElementById('candy'));
				this.candy.setOption({
					legend: {
						data:['交换中心','商城','营销活动'],
						textStyle:{
							color:['#5085f2','#8d7fec','#57e7ec']
						}
					},
					tooltip: {
						trigger: "axis",
						formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}',
						backgroundColor: 'rgba(0,0,0,0.7)', // 背景
						padding: [8, 10], //内边距
						extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
					},
					xAxis: [{
						type: 'category',
						inverse: true,
						axisTick: {
							alignWithLabel: true
						},
						splitLine: {
						            show: false
						        },
						axisLine: {
							lineStyle: {
								color: '#888'
							}
						},
						data: this.getDate()
					}],
					yAxis: [{
						type: 'value',
						name: '糖果分红',
						position: 'left',
						
						axisLine: {
							lineStyle: {
								color: '#888'
							}
						},
						axisLabel: {
							formatter: '{value}'
						}
					}, ],
					series: [{
							name: '交换中心',
							type: 'line',
							data: [13.7, 3.4, 105.5, 16.1, 7.4, 15.2, 10, 100, 18, 100],
							itemStyle: {
								color: '#73A0FA'
							},
							symbolSize: 3, //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
							symbol: 'circle', //标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
							smooth: true, //是否平滑曲线显示
							showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
							areaStyle:{
								color:'#f2f2f2'
							}
						},
						{
							name: '商城',
							type: 'line',
							data: [100, 13.7, 300, 3.4, 15.2, 13.5, 10, 102, 3, 106],
							itemStyle: {
								color: '#73DEB3'
							},
							symbolSize: 3, //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
							symbol: 'circle', //标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
							smooth: true, //是否平滑曲线显示
							showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
							areaStyle:{
								color:'#f2f2f2'
							}
						},
						{
							name: '营销活动',
							type: 'line',
							data: [62.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0],
							itemStyle: {
								color: '#FFB761'
							},
							symbolSize: 3, //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
							symbol: 'circle', //标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
							smooth: true, //是否平滑曲线显示
							showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
							areaStyle:{
								color:'#f2f2f2'
							}
						}
					]
				})
			}
		}
	}
</script>

<style scoped>
	#candy {
		width: 100%;
		height: 100%;
	}
</style>
